<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Show Manager</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" />	
		<link type="text/css" href="uploadify/uploadify.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
		<script type="text/javascript" src="uploadify/jquery.uploadify.min.js"></script>
		<script type="text/javascript" src="js/datahandler.js"></script>
		<script type="text/javascript" src="js/cmd.js"></script>
		<style>
			body {
				font-size: 12px;
			}
			body {
				background: #ccc;
			}
			label {
				display: block;
				margin-bottom: 5px;
			}
			
			#show_selector {
				width: 400px;
			}
			
			.page_form {
				background: #eee;
				width: 410px;
				padding: 10px;
				margin: 10px;
				float:left;
			}
			textarea {
				width: 400px;
				height: 300px;
			}
			#playlist {
				padding: 0px;
			}
			
			#playlist li {
				display: block;
				padding: 5px;
				margin-bottom: 5px;
				border: 1px solid gray;
			}
			
			#playlist li.active {
				background: #ffb;
			}
			
			#toolbar {
				width: 860px;
			}
			
		</style>

		<script type="text/javascript">
		$(document).ready(function() {
			$('#file_upload').uploadify({
				'uploader'  : 'uploadify.swf',
				'script'    : 'uploadify.php',
				'buttonText': 'UPLOAD SONG',
				'cancelImg' : 'uploadify/cancel.png',
				'folder'    : 'uploads',
				'multi'     : false,
				'auto'      : true
			});
		});
		var doBlink = function(obj,start,finish) { jQuery(obj).fadeOut(300).fadeIn(300); if(start!=finish) { start=start+1; doBlink(obj,start,finish); } }
		jQuery.fn.blink = function(start,finish) { return this.each(function() { doBlink(this,start,finish) }); } 
		</script>
		<script>
			function addSongForm() {
				$("#song_artist").val('');
				$("#song_title").val('');
				$("#song_year").val('');
				$("#song_length").html("[not uploaded]");
				$("#song_fname").html("[not uploaded]");
				$("#song_description").val('');
				$("#edit_song").blink();
				$("#song_title").focus();
				currentSong = null;
			}
		
			function saveOrderChanges() {
				var res = new Array();
				$("#playlist li").each(function(i, el){
					var id = $(el).attr("id");
					id = id.substring(id.indexOf("_") + 1);
					res.push(id);
				});
				cmd("show.saveplaylist", {id: show["ID"], playlist: res});
			}
			
			function saveSong(){
				var id = null;
				if (currentSong){
					id = currentSong["ID"];
				}
				cmd("show.savesong", {
					id: id,
					artist: $("#song_artist").val(),
					title: $("#song_title").val(),
					year: $("#song_year").val(),
					description: $("#song_description").val(),
					show_id: show["ID"]
				});
			}
			
			function deleteSong(){
				if (currentSong){
					id = currentSong["ID"];
					cmd("show.deletesong", {id: id, show_id: show["ID"]});
				}
				addSongForm();
			}
		
			$(document).ready(function() {
				$("#playlist").sortable({
					stop: saveOrderChanges
				});
				$("button").button();
				$(".page_form, select, input, textarea").addClass("ui-corner-all ui-widget");
				$("#add_song_button").click(addSongForm);
				$("#save_song_button").click(saveSong);
				$("#delete_song_button").click(deleteSong);
				
				cmd('show.getpage');
			})
		</script>
	</head>
	<body>
	
		<div id="toolbar" class="page_form" >
			<button id="save_all_button">Save All</button>
			<button id="create_show_button">Create show</button>
			<button id="rename_show_button">Rename show</button>
			<button id="delete_show_button">Delete show</button>
		</div>
		
		<br clear="all">
		<!------------------------------------------------------------------------------->
		
		<div style="display:none" id="create_show" title="Create Show">
			<form id="create_show_form">
				<input type="text" name="show_name">
				<button id="create_show_confirm">Create</button>
			</form>
		</div>
				
		<!------------------------------------------------------------------------------->
		
		<div  class="page_form" id="edit_show" title="Playlist">
			<p>
				<select id="show_selector" class="ui-widget">
					
				</select>
			</p>
			
			<p>
				<ul id="playlist">
				</ul>
				
				<button id="add_song_button">Add song</button>
			</p>
			
			<p>
				<textarea id="show_description"></textarea>
			</p>			
		</div>
		
		<!------------------------------------------------------------------------------->
		
		<div class="page_form" id="edit_song" title="Edit Song">
			<label for="song_name">Song name:</label>
			<input type="text" name="song_name" id="song_title">
			
			<label for="song_artist">Artist:</label>
			<input type="text" name="song_artist" id="song_artist">
			
			<label for="song_year">Song year:</label>
			<input type="text" name="song_year" id="song_year">
			
			<p>
				Song length: <span id="song_length">[not uploaded]</span><br>
				Song filename: <span id="song_fname">[not uploaded]</span>
			</p>
			
			<div><input id="file_upload" name="file_upload" type="file" /></div>
			
			<p>
				<label for="song_description">Description</label>
				<textarea name="song_description" id="song_description"></textarea>
			</p>
			
			<div>
				<button id="save_song_button">Save</button>
				<button id="delete_song_button">Delete</button>
			</div>
	</div>
	</body>
</html>